import React, { Fragment } from 'react';
import { ColumnsType } from 'antd/es/table';
import { Card, Table, Button, Modal } from 'antd';
import { connect } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import InvADJModal from './InvADJModal';
import InvADJSearch from './InvADJSearch';

//数量调整
interface User {
  key: number;
  partNum: string;
  partDescription: string;
  warehouseCode: string;
  binNum: string;
  lotNum: string;
  onhandQty: string;
  avaQty: string;
}
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      visible: false,
      formVals: {},
      dataSource: [],
      defaultParams: {},
      list: [],
      params: {},
      pageSize: 10,
      pageIndex: 1
    };
  }

  componentDidMount() {
    this.query();
  }
  query = () => {
    //获取数量调整list 接口
    const { params = {}, pageSize, pageIndex } = this.state;
    const { dispatch } = this.props;
    this.setState({ loading: true });
    var skip = (pageIndex - 1) * pageSize;
    dispatch({
      type: 'Abp/getList',
      payload: {
        ...params,
        skipCount: skip,
        maxResultCount: pageSize
      },
      control: 'PartBin',
    }).then(() => {
      let resp = this.props.response;
      this.setState({ dataSource: resp.result.items, loading: false });
    });
  };
  /**
   * 控制更新模态框显示
   * @param {boolean} visible 是否显示
   * @param {object} formVals 模态框默认值
   */
  switchVisible = (visible = false, formVals = {}) => {
    this.setState({
      visible,
      formVals,
    });
  };
  handleSubmit = async (values: any) => {
    const { dispatch } = this.props;
    const { warehouseCode, ...res } = values;
    // return;
    await dispatch({
      type: 'Abp/invAdjust',
      payload: {
        whseCode: warehouseCode,
        ...res,
      },
    });
    this.switchVisible();
    this.query();
  };
  /**
   * 搜索
   */
  handleSearch = (values: any) => {
    const { warehouseCode, ...res } = values;
    this.setState(
      {
        params: {
          whseCode: warehouseCode,
          ...res,
        },
      },
      this.query,
    );
  };
  render() {
    const { visible, formVals, defaultParams, dataSource, loading,pageSize,totalCount } = this.state;

    return (
      <PageHeaderWrapper title={false}>
        <Card title="数量调整">
          <InvADJSearch
            defaultParams={{ ...defaultParams }}
            onSearch={this.handleSearch}
          ></InvADJSearch>
          <Table
            loading={loading}
            rowKey="id"
            size="small"
            columns={this.columns}
            dataSource={dataSource}
            bordered={false}
            scroll={{ x: 'max-content' }}
            pagination={{
              onChange: page => {
                this.setState({ pageIndex: page }, () => {
                  this.query();
                });
              },
              pageSize,
              total: totalCount,
            }}
          />
        </Card>
        <Modal
          title="数量调整"
          width={640}
          bodyStyle={{ padding: 24 }}
          visible={visible}
          destroyOnClose
          footer={null}
          onCancel={() => this.setState({ visible: false })}
        >
          <InvADJModal
            formVals={formVals}
            onCancel={this.switchVisible}
            onSubmit={this.handleSubmit}
          />
        </Modal>
      </PageHeaderWrapper>
    );
  }
  columns: ColumnsType<User> = [
    {
      title: '序号',
      key: 'index',
      width: 80,
      align: 'center',
      render: (_: any, __: any, i: any) => i + 1,
    },
    {
      title: '物料编码',
      dataIndex: 'partNum',
      align: 'center',
      width: 150,
    },
    {
      title: '描述',
      dataIndex: 'partDescription',
      ellipsis: true
    },
    
    {
      title: '仓库',
      align: 'center',
      dataIndex: 'warehouseCode',
      width: 150,
    },
    {
      title: '库位 ',
      align: 'center',
      dataIndex: 'binNum',
      width: 150,
    },
    {
      title: '批次',
      align: 'center',
      dataIndex: 'lotNum',
      width: 120,
    },
    {
      title: '现存数量',
      dataIndex: 'onhandQty',
      width: 120,
      align: 'center',
    },
    {
      title: '可用数量',
      dataIndex: 'avaQty',
      width: 120,
      align: 'center',
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      render: (_: any, record: any) => (
        <Fragment>
          <Button
            size="small"
            type="primary"
            title="调整"
            onClick={() => this.switchVisible(true, { ...record })}
          >
            调整
          </Button>
        </Fragment>
      ),
    },
  ];
}
export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
}))(ViewPage);
